草庐IT

D3 笔记

全部标签

javascript - D3 力导向布局的基础知识

我正在使用d3.js进入令人兴奋的力导向布局世界。我掌握了d3的基础知识,但我无法弄清楚设置力导向布局的基本系统。现在,我正在尝试创建一个简单的布局,其中包含一些漂浮在中心的不相连的气泡。很简单吧!?创建了正确的圆圈,但没有任何反应。编辑:问题似乎是force.nodes()返回初始数据数组。在工作脚本中,force.nodes()返回一个对象数组。这是我的代码:$(function(){varwidth=600,height=400;vardata=[2,5,7,3,4,6,3,6];//createchartvarchart=d3.select('body').append('sv

javascript - 如何以编程方式触发 D3 拖动事件?

所以我有一些数据与拖动事件监听器绑定(bind):myNodes.enter().append("svg:g").call(d3.behavior.drag().on("drag",function(){console.log(d3.event.dx,d3.event.dy);}));现在我想以编程方式在某个节点上调用这个onDrag函数。我确实知道通过做标准事件也是可能的aNode.on("click")()//worksaNode.on("drag")()//doesn'twork有什么办法吗?谢谢。 最佳答案 将回调(您传递给

javascript - d3 似乎假设我知道 csv 的列名?

我有生成的csv文件,我正在尝试将它们加载到d3中以绘制它们。列名是基于数据的,所以我基本上无法提前知道它们。通过测试,如果我知道列的名称,我就能够加载这些数据并将其绘制得很好而且很好......但我不知道我的用例。我如何在d3中处理这个问题?我似乎无法在网上或文档中找到任何帮助/引用此信息的内容。当我从d3.csv登录到控制台数据[0]时,我可以看到有两列和为它们读取的值,但我不知道如何在不知道的情况下任意引用数据的第1列或第2列提前列的名称。一般来说,我想避免这种情况,因为我知道我的时间戳在第1列中,而我的数据在第2列中,如果这有意义的话。编辑,我的答案使用d3.entries来帮

javascript - 在 x 轴上带有范围选择器的 d3 条形图(如 dygraphs)

是否可以在d3中生成条形图并使用类似工具或功能,如dygraphs(this)中的工具或功能用于范围选择器?我想在x轴上放大和缩小时间。谢谢! 最佳答案 是的,您可以使用d3.brush来创建此功能。这是d3的创建者关于如何使用它的示例-这正是您想要的(可缩放条形图):http://bl.ocks.org/mbostock/1667367 关于javascript-在x轴上带有范围选择器的d3条形图(如dygraphs),我们在StackOverflow上找到一个类似的问题:

javascript - D3中不可视化的平行坐标多维数据

我正在使用d3.js处理平行坐标图,我正在尝试从外部json文件中绘制一些多维数据。json文件中的数据结构如下:[{"timestamp":1437571117.035159,"dimension":10,"value":[{"value":0.13347661474528993,"label":"A"},{"value":0.8677079004784608,"label":"B"},{"value":0.7757451827314333,"label":"C"},{"value":0.9614725817942508,"label":"D"},{"value":0.5259754

javascript - d3.js 获取图表外的图例

我正试图在制图区域之外获取图表的图例。这是边距:varmargin={top:50,right:200,bottom:50,left:40};varwidth=960-margin.left-margin.right,height=500-margin.top-margin.bottom;首先我创建了svg:varsvg=d3.select("body").append("svg").attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom).append("g"

【真北直播笔记】董越:简明DevOps学习地图

缘起真北敏捷社区的宗旨是:求知、连接。求知就是学习,家里没矿的话,学习是一个人最重要的动力之源。连接就是把人拉在一起,我们相信人与人的互动会带来美好的变化。今天的直播是把大家拉在一起学习,就是求知、连接。嘉宾介绍董越,DevOps资深专家,阿里巴巴集团前研发效能事业部架构、高级产品专家等职,从事Aone&云效DevOps产品设计、阿里云专有云集成与交付解决方案设计等工作。在加入阿里之前,他还曾就职于西门子、摩托罗拉、雅虎、索尼、去哪儿网等大型企业,一直从事软件配置管理、软件集成与交付、DevOps相关的工作。当前主要从事企业级DevOps体系建设与咨询工作,帮助众多企业提升软件研发交付效能。已

嵌入式UI框架 LVGL 学习笔记 02 页面管理和主题定制

LVGL页面切换LVGL中没有明确的页面切换方案,参考(2.6#lvgl-多页面(screen)设定/切换)根据实际可用API,可以考虑两种方案:通过FLAG(LV_OBJ_FLAG_HIDDEN)隐藏或者显示lv_obj_add_flag/lv_obj_clear_flag根UI控件通过管理child节点的对象来实现lv_obj_set_parent/lv_obj_get_child通过屏幕显示obj切换lv_scr_load/lv_scr_load_anim与参考文章不同的是,这里更建议使用1和2两种方式进行管理。具体场景如下:如果是简单页面,没有标题,页脚,侧边栏等复杂元素,建议使用3。

javascript - d3.js 中的 HTML 工具提示清理

我在thisexample之后在d3.js中实现了HTML工具提示,使用这样的代码:functiononmouseover(d){$("#tooltip").fadeOut(100,function(){//generatetooltip$("#tooltip").fadeIn(100);});}functiononmouseout(){$("#tooltip").fadeOut(250);}它可以工作,但表现出一种行为,即如果鼠标在多个节点上快速移动,工具提示可能会停留在页面上。exampleabove表现出相同的行为(快乐的摆动!)。做了一些研究后似乎nvd3使用dispatch完

javascript - 在鼠标悬停时显示 d3.layout.force 链接工具提示

如何在鼠标悬停在D3有向图布局中的链接上实现工具提示?我正在改编D3force示例,因此使用如下代码设置节点工具提示非常简单:node.append("title").text(function(n){returnn.id;});对链接尝试类似的技术并没有导致鼠标悬停在工具提示上:varlink=svg.selectAll("line.link").data(json.links).enter().append("line").attr("class","link").style("stroke-width",function(d){return4;});link.append("ti